<template>
	<view class="uni_box home">
		<navbar title='招工要求'>
		</navbar>
		<view class="content">

			<!-- <view class="zitem alitem" @click="getzhao">
				<text class="zhaoname">招工要求</text>
				<view class="ml flex-row">
					<text class="wanshan">完善招工要求</text>
					<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
				</view>
			</view>
			<view class="zthree">
					<view class="shutext">
						<text class="jianjie">1111</text>
						<text class="jianname">222</text>
					</view>
				</view> -->
			<view class="zitem flex-col">
				<view class="zone alitem" @click="getzhao">
					<text class="zhaoname">招工要求</text>
					<view class="ml flex-row">
						<text class="wanshan">完善招工要求</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<view class="zthree zfour" v-if="from.title">
					<text class="jianjie">{{from.title}}</text>
					<text class="jianjie">{{from.gender==0?'性别不限':from.gender==1?'男':'女'}}  {{from.age[0]+'~'+from.age[1]}}</text>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem" @click="gettime">
					<text class="zhaoname">干活时间</text>
					<view class="ml flex-row">
						<text class="wanshan">选择干活时间</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<view class="ztwo" v-if="from.work_time.gtime">
					<text class="shiname">{{from.work_time.startday+'至'+from.work_time.endday}}</text>
					<view class="shinav">
						<view class="shileft">
							<text class="kname">开工时间</text>
							<text class="ktime">{{from.work_time.starthour}}</text>
						</view>
						<view class="shilian">
							<view class="lianone">
								<image class="bg" src="@/pages_admin/static/shilianicon.png" />
								<view class="ltxt">
									工作时长
								</view>
							</view>
							<text class="gong">{{from.work_time.xtime}}小时</text>
						</view>
						<view class="shileft">
							<text class="kname">工作结束时间</text>
							<text class="ktime">{{from.work_time.endhour}}</text>
						</view>
					</view>
					<view class="yishe" v-if="from.work_time.break!=''">
						已设置了{{from.work_time.break.length}}个休息时间段
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem" @click="getadress">
					<text class="zhaoname">干活地点</text>
					<view class="ml flex-row">
						<text class="wanshan">选择</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<view class="zthree" v-if="from.address&&addressinfo" @click="getadress">
					<view class="flex-row">
						<image class="icon_dz" src="@/pages_admin/static/icon_dz.png" />
						<text class="sheng">{{addressinfo.name}}</text>
					</view>
					<text class="shi">{{addressinfo.address}}</text>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">需求人数</text>
				</view>
				<text class="fadan">首单免费发布(限制3人及以下)</text>
				<view class="henxu">
					<view class="hengleft" @click="getnum(1,1)">
						<image class="icon_jh" src="@/pages_admin/static/icon_jh.png" />
					</view>
					<view class="hengnav">
						<u-input v-model="from.people" input-align="center" type="number" placeholder='请输入需求人数' />
					</view>
					<view class="hengleft" @click="getnum(2,1)">
						<image class="icon_jh" src="@/pages_admin/static/icon_zj.png" />
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">工价设置</text>
					<view class="jishi">
						<!-- <view class="jiitem" :class="from.settlement==1?'jactive':''" @click="getji(1)">
							<text class="jsname">计时</text>
							<view class="hengbot"></view>
						</view>
						<view class="jiitem"  :class="from.settlement==2?'jactive':''" @click="getji(2)">
							<text class="jsname">计件</text>
							<view class="hengbot"></view>
						</view> -->
						<view class="jishiitems" :class="from.settlement==1?'jiactive':''" @click="getji(1)">
							计时
						</view>
						<view class="jishiitems" :class="from.settlement==2?'jiactive':''" @click="getji(2)">
							计件
						</view>
					</view>
				</view>
				<view class="henxu" style="margin: 40rpx 0;">
					<view class="hengleft" @click="getnum(1,2)">
						<image class="icon_jh" src="@/pages_admin/static/icon_jh.png" />
					</view>
					<view class="hengnav" v-if="from.settlement==1">
						<u-input v-model="from.price" style="width: 65%;" @input="getinput" input-align="center" type="number" placeholder='请输入工价' />
						<text class="danwei">元/小时</text>
					</view>
					<view class="hengnav" v-if="from.settlement==2">
						<u-input v-model="from.price" style="width: 65%;" input-align="center" type="number" placeholder='请输入计时工件' />
						<text class="danwei">元/件</text>
					</view>
					<view class="hengleft" @click="getnum(2,2)">
						<image class="icon_jh" src="@/pages_admin/static/icon_zj.png" />
					</view>
				</view>
				<view class="jsview" v-if="from.settlement==1">
					<text class="qhua" v-if="!from.price">请滑动滑块</text>
					<text class="qhua qjia" v-else>¥ <text style="font-size: 40rpx;display: inline-block;margin-left: 5rpx;">{{ from.price }}</text></text>
					<view class="huakuai">
						<view class="huaview">
							<view class="yanse">
								<view class="huaone">
									
								</view>
								<view class="huatwo">
									
								</view>
								<view class="huathree">
									
								</view>
							</view>
							<view class="yanzi">
								<text class="jia jone">¥0</text>
								<text class="jia jtwo">¥30</text>
								<text class="jia jthree">¥55</text>
								<text class="jia jfour">¥100</text>
							</view>
							
							<view class="newhua">
								<u-slider v-model="value" min="0" max="1000" @end="endslider" :use-slot="true">
									<view class="wrap">
										<image class="icon_an" src="@/pages_admin/static/icon_an.png" />
										<!-- <view class="badge-button">
											{{value}}
										</view> -->
									</view>
								</u-slider>
							</view>
						</view>
						
					</view>
				</view>

				<view class="zone alitem"  v-if="from.settlement==2">
					<text class="zhaoname">保底工价</text>
					<view class="jishi">
						<text class="mshu">开启保底将提升70%招聘成功率</text>
					</view>
				</view>
				<view class="henxu" v-if="from.settlement==2" style="margin: 40rpx 0;">
					<view class="hengleft" @click="getnum(1,3)">
						<image class="icon_jh" src="@/pages_admin/static/icon_jh.png" />
					</view>
					<view class="hengnav">
						<u-input v-model="from.minimum" style="width: 65%;" input-align="center" type="text" placeholder='请输入保底工价' />
						<text class="danwei">元/时</text>
					</view>
					<view class="hengleft" @click="getnum(2,3)">
						<image class="icon_jh" src="@/pages_admin/static/icon_zj.png" />
					</view>
				</view>
			</view>
			<!-- <view class="zitem flex-col" @click="getyiwai">
				<view class="zone alitem">
					<text class="zhaoname">零工意外保障</text>
					<view class="ml flex-row">
						<text class="wanshan" :class="from.insuranceist==0?'wu':''">{{from.insuranceist==0?'无保障':'有保障'}}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<text class="fadan" style="margin-bottom: 0;">保24小时/保上下班</text>
			</view> -->

			<view class="gaoshe">
				<!-- <view class="gaoitem" @click="jieshow=true">
					<view class="gaoleft">
						<text class="jiename">接听员工电话设置</text>
						<text class="miao">是否需要员工电话沟通</text>
					</view>
					<view class="gaoright" :class="from.is_phone == 1?'kai':''">
						<view class="kaiicon"></view>
						<text class="wei">{{ from.is_phone == 1?"已开启":"未开启" }}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view> -->
				<view class="gaoitem" @click="manageshowClick(1)">
					<view class="gaoleft">
						<text class="jiename">开工码</text>
						<text class="miao">防止员工提前开工，欺诈打卡</text>
					</view>
					<view class="gaoright"  :class="from.start_code == 1?'kai':''"> 
						<view class="kaiicon"></view>
						<text class="wei">{{ from.start_code == 1?'已开启':'未开启' }}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<!-- <view class="gaoitem" @click="manageshowClick(2)">
					<view class="gaoleft">
						<text class="jiename">人脸打卡</text>
						<text class="miao">员工打卡需要拍照，确保本人干活</text>
					</view>
					<view class="gaoright" :class="from.is_facial == 1?'kai':''">
						<view class="kaiicon"></view>
						<text class="wei">{{ from.is_facial == 1?'已开启':'未开启' }}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view> -->
				<!-- <view class="gaoitem"  @click="manageshowClick(3)">
					<view class="gaoleft">
						<text class="jiename">计薪工时</text>
						<text class="miao">选择计算方式，结算工资更便利</text>
					</view>
					<view class="gaoright" :class="from.timed == 1?'kai':from.timed == 2?'kai':''">
						<view class="kaiicon"></view>
						<text class="wei">{{ from.timed == 1?'按员工打卡时间':from.timed == 2?'按工作设定时间':'未开启' }}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view> -->
				<view class="gaoitem"  @click="manageshowClick(4)">
					<view class="gaoleft">
						<text class="jiename">上传证件照</text>
						<text class="miao">员工上传专业工作证件照</text>
					</view>
					<view class="gaoright" :class="from.id_card == 1?'kai':''">
						<view class="kaiicon"></view>
						<text class="wei">{{ from.id_card == 1?'已开启':'未开启' }}</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">联系电话</text>
					<view class="ml flex-row">
						<u-input v-model="from.phone" style="margin-right: 20rpx;" input-align="right" type="text" placeholder='请输入电话' />
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
			</view>
			<view class="xieyi">
				<view class="xieiem">1、发布招工即表示遵守<text class="xys" @click.stop="navrouter('/pages/my/yhXieyi?key=nnrjzgxxfbgz')">《牛牛日结信息发布规则》</text>，如有违规将导致账号异常</view>
				<view class="xieiem">2、发布招工即表示您同意与求职者签订<text class="xys" @click.stop="navrouter('/pages/my/yhXieyi?key=lhygxy')">《灵活用工协议》</text>，承担本协议约定的权利义务。</view>
			    <!-- <view class="xieiem">3、发布招工即表示您已阅读并同意 <text class="xys">《保险客户告知书》</text> </view> -->
			</view>

			
		</view>
		<view class="botbtn">
			<view class="btnview" @click="fabu">发布招工</view>
		</view>

		<!-- 接听员工电话设置弹窗 -->
		<JieTypePop :jieshow="jieshow" @closejie="jieshow=false" :is_phone="from.is_phone" @jiequedin="jiequedin"></JieTypePop>
		<!-- 意外险弹窗 -->
		<InsurePop :insureshow="insureshow" :title="from.title" :baolist="baolist" :baoitem="baoitem" @closeinsure="insureshow=false" :insuranceist="yiwainum(from.insuranceist)" @baoClick="baoClick" @baoitemClick="baoitemClick"></InsurePop>
		
		<!-- 开工码 人脸打卡 计时工薪等弹窗 -->
		<ManagePop :manageshow="manageshow" :managestatus="managestatus" @closemanage="manageshow=false" :start_code="from.start_code" :is_facial="from.is_facial" :timed="from.timed" @getquedin="getquedin"></ManagePop>
	</view>
</template>

<script>
import JieTypePop from '@/pages_admin/components/JieTypePop/JieTypePop'
import InsurePop from '@/pages_admin/components/InsurePop/InsurePop'
import ManagePop from '@/pages_admin/components/ManagePop/ManagePop'
import {
		baseUrl
	} from '@/utils/config.js'; 
	export default {
		components: {
			JieTypePop,
			InsurePop,
			ManagePop
		},
		data() {
			return {
				min: 0, // 最小值范围
				max: 100, // 最大值范围
				minValue: 0, // 最小值滑块初始值
				// maxValue: 100, // 最大值滑块初始值
				value: 0,
				name:'',
				price:0,
				phone:'',
				manageshow:false,
				managestatus:3,//1开工码  2人脸 3计时工薪
				jieshow:false,//接听电话
				insureshow:false,//意外险
				from:{
					occupation:'',//工种
					gender:0,//行别
					age:['16','不限'],//年龄
					title:'',
					describe:'',
					images:'',
					video:'',
					benefit:'',//福利
					people:'1',//需求人数
					settlement:1,//1计时 2计件
					price:'10',
					insuranceist:0,//意外险
					// insuranceist
					phone:'',//联系电话
					is_phone:1,//是否需要拨打电话 默认需要
					start_code:'',//开工码
					is_facial:0,//是否需要人脸
					timed:'1',
					id_card:0,//是否上传证件照
					minimum:0,//保底工资
					address:'',//地址 传id
					work_time:
					// {startday:"2025-03-30"
					// ,starthour:"22:54",endday:"2025-03-30",endhour:"22:55",gtime:"0.0",break:[],xtime:0}
					{
						startday:'',
						starthour:'',
						endday:'',
						endhour:'',
						gtime:'',
						break:[],
						xtime:''
					},//工作时间
				},
				addressinfo:{

				},
				baolist:[],
				baoitem:{},
				dayinfo:{
					startday:'',
					starthour:'',
					endday:'',
					endhour:'',
					gtime:'',
					break:[],
					xtime:''
				},
				user:{},
				temid:'',//模版id
			}
		},
		onLoad(option) {
			
			this.yiwailist();//保险数据
			
			this.getmorenadress();//获取默认地址
			if(option.temid){
				this.temid = option.temid
				this.mobanlist();//模版信息
			}
		},
		onShow() {
			let that = this
			uni.$on('isRefresh',function(data){
				that.openCreateForm(data)
				// that.from.insuranceist = 1;//默认开启保障
				console.log('监听到事件来自返回的参数：' + JSON.stringify(data));
                // TODO 下面执行刷新的方法
			})
			uni.$on('isRefreshtime',function(data){
				// that.dayinfo = data
				that.from.work_time = data
				console.log('监听到事件来自返回的参数：' + JSON.stringify(data));
                // TODO 下面执行刷新的方法
			})
			uni.$on('isRefreshadress',function(data){
				that.addressinfo = data
				that.from.address = data.id
				console.log('监听到事件来自返回的参数：' + JSON.stringify(data));
                // TODO 下面执行刷新的方法
			})
			this.getuser();

		},
		methods: {
			
			async mobanlist(){
				let res = await this.$u.api.useTemplate({
					id:this.temid
				});
				let temlist = res.info
				temlist.age = temlist.age.split(',')
				temlist.work_time = JSON.parse(temlist.work_time)
				// console.log(temlist)
				this.openCreateForm(temlist)
			},
			openCreateForm(obj1){
				// tabrow.value = obj1
				let obj2 = this.from
				for (const key in obj1) {
					if (obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {
						obj2[key] = obj1[key];
					}
				}
				this.from = obj2
			},
			async getuser(){
				let res = await this.$u.api.user({
				});
				console.log(res)
				this.user = res.data
				if(this.user.mobile){
					this.from.phone = this.user.mobile
				}
			},
			openCreateForm(obj1){
				let obj2 = this.from
				for (const key in obj1) {
					if (obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {
						obj2[key] = obj1[key];
					}
				}
				this.from = obj2
				console.log(this.from)
			},
			endslider(e) {
				
				console.log(this.value)
				this.from.price = this.value
			},
			getinput(e){
				// console.log(e)
				if(e>=100){
					this.value = Number(100)
				}else if(e<0){
					this.value = 0 
					this.from.price = 0
				}else{
					this.value = Number(e)
				}
			},
			getzhao(){
				this.navrouter("/pages_admin/twoPage/FabuJobtwo?from="+JSON.stringify(this.from));
			},
			gettime(){
				this.navrouter("/pages_admin/twoPage/WorkTime?dayinfo="+JSON.stringify(this.from.work_time));
			},
			getadress(){
				this.navrouter("/pages_admin/twoPage/Adress?type=fabu");
			},
			async getmorenadress(){
				let res = await this.$u.api.addressdefault();
				console.log(res)
				if(res){
					this.addressinfo = res
					this.from.address = res.id
				}
			},
			async fabu(){
				let newfrom = Object.assign({}, this.from);
				console.log(newfrom); // { a: 1, b: { c: 2 } }
				newfrom.age = newfrom.age.toString()
				newfrom.work_time = JSON.stringify(newfrom.work_time)
				if(!newfrom.occupation){
					this.$u.toast("请选择工种");
					return;
				}
				if(!newfrom.address){
					this.$u.toast("请选择地址");
					return;
				}
				if(!newfrom.people){
					this.$u.toast("请输入需求人数");
					return;
				}
				if(!newfrom.price){
					this.$u.toast("请输入工价");
					return;
				}
				if(!newfrom.phone){
					this.$u.toast("请输入联系电话");
					return;
				}
				if(!this.from.work_time.xtime){
					this.$u.toast("请选择干活时间");
					return;
				}
				if(!this.isTimeAfterCurrent(this.from.work_time.startday+' '+this.from.work_time.starthour)){
					this.$u.toast("开始时间需大于当前时间");
					return;
				}

				
				// let res = await this.$u.api.taskadd(newfrom);
				// console.log(res)
				// this.$u.toast("发布成功");
				this.navrouter("/pages_admin/twoPage/PayOrder?newfrom="+JSON.stringify(newfrom));
			},
			isTimeAfterCurrent(dateTimeStr) {
				// 将字符串转换为Date对象
				const dateTime = new Date(dateTimeStr);
				
				// 获取当前时间
				const currentDate = new Date();
				
				// 比较两个日期时间
				return dateTime > currentDate;
			},
			getnum(e,type){
				if(type == 1){
					//需求人数
					if(e == 1){
						if(!this.from.people&&Number(this.from.people)<1){
							
						}else{
							this.from.people = Number(this.from.people)-Number(1)
						}
					}else if(e == 2){
						if(!this.from.people){
							this.from.people = 1
						}else{
							this.from.people = Number(1)+Number(this.from.people)
						}
					}
				}else if(type == 2){
					//工价
					if(e == 1){
						if(!this.from.price&&Number(this.from.price)<1){
							
						}else{
							this.from.price = Number(this.from.price)-Number(1)
						}
					}else if(e == 2){
						if(!this.from.price){
							this.from.price = 1
						}else{
							this.from.price = Number(1)+Number(this.from.price)
						}
					}
				}else if(type == 3){
					//保底工价
					if(e == 1){
						if(!this.from.minimum&&Number(this.from.minimum)<1){
							
						}else{
							this.from.minimum = Number(this.from.minimum)-Number(1)
						}
					}else if(e == 2){
						if(!this.from.minimum){
							this.from.minimum = 1
						}else{
							this.from.minimum = Number(1)+Number(this.from.minimum)
						}
					}
				}
				
			},
			getji(e){
				this.from.settlement = e
			},
			getyiwai(){
				if(!this.from.title){
					this.$u.toast("请选择工种");
					return;
				}
				this.insureshow=true
			},
			async yiwailist(){
				
				let res = await this.$u.api.getInsuranceistList({
					page:1,
					limit:1000
				});
				this.baolist = res.list
				this.baoitem = res.list[0]
			},
			baoClick(e){
				// this.from.insuranceist = e.checked?'1':'0'
				this.insureshow=false
				this.baoitem = e.baoitem
				this.from.insuranceist=e.baoitem.id
				console.log(this.from.insuranceist)
			},
			baoitemClick(e){
				this.baoitem = e
			},
			jiequedin(e){
				this.from.is_phone = e
				this.jieshow=false
			},
			manageshowClick(e){
				this.managestatus = e
				this.manageshow = true
			},
			getquedin(e){
				//开工码 人脸等点击确定
				if(e.managestatus == 1){
					this.from.start_code = e.checked?'1':'0'
				}else if(e.managestatus == 2){
					this.from.is_facial = e.checked?'1':'0'
				}else if(e.managestatus == 3){
					this.from.timed = e.timed
					console.log(this.from.timed)
				}else if(e.managestatus == 4){
					this.from.id_card = e.checked?'1':'0'
				}
				this.manageshow=false
			},
			yiwainum(e){
				return e ==1?true:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.jianjie{
		color: #666;
		font-size: 28rpx;
		font-weight: 400;
		display: block;
		margin-bottom: 5rpx;
	}
	.content{
		background-color: #f5f5f5;
		padding: 30rpx 30rpx 130rpx;
		.zitem{
			padding: 30rpx;
			min-height: 110rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 24rpx;
			.zhaoname{
				font-weight: 800;
				font-size: 32rpx;
				color: #111111;
			}
		}
		.wanshan{
			font-weight: 500;
			font-size: 24rpx;
			color: #FF5F40;
			margin-right: 13rpx;
		}
		.wu{
			color: #999999;
		}
		.zone{
			display: flex;
			flex-direction: row;
		}
		.flex-col{
			flex-direction: column;
		}
		.icon_gd{
			width: 20rpx;
			height: 20rpx;
		}

		.flex-row{
			flex-direction: row;
			display: flex;
			align-items: center;
		}
		.alitem{
			align-items: center;
		}
		.ztwo{
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			.shiname{
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				display: block;
				margin-bottom: 14rpx;
			}
		}
		.zthree{
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.sheng{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
				max-width: 90%;
				display: inline-block;
			}
			.icon_dz{
				width: 32rpx;
				margin-right: 8rpx;
				height: 32rpx;
			}
			.shi{
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				display: block;
				margin-top: 8rpx;
			}
		}
		.zfour{
			background-color: #f5f5f5;
			padding: 20rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
		}
		.fadan{
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			display: block;
			margin-top: 12rpx;
			margin-bottom: 30rpx;
		}
		.shinav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.shileft{
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// width: 42%;
				flex: 1;
				height: 130rpx;
				.kname{
					color: #333;
					font-size: 25rpx;
					font-weight: 400;
				}
				.ktime{
					font-weight: 500;
					font-size: 38rpx;
					color: #111111;
				}
			}
			.shilian{
				display: flex;
				flex-direction: column;
				width: 180rpx;
				margin: 0 15rpx;
				justify-content: center;
				align-items: center;
				.lianone{
					position: relative;
					width: 100%;
					height: 37rpx;
					.ltxt{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF653F;
					}
				}
				.gong{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
		.yishe{
			margin-top: 20rpx;
			padding: 5rpx 20rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			color: #fff;
			font-size: 22rpx;
			font-weight: 400;
			border-radius: 10rpx;
		}
	}
	.wrap {
		padding: 30rpx;
	}
	.gaoshe{
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		padding:20rpx 30rpx 10rpx;
		margin-bottom: 24rpx;
		.gaoitem{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			flex-direction: row;
			align-items: center;
			.gaoleft{
				display: flex;
				flex-direction: column;
				.jiename{
					font-weight: 800;
					font-size: 28rpx;
					color: #111111;
				}
				.miao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
			}
			.gaoright{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				.wei{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				.icon_gd{
					margin-left: 15rpx;
					width: 18rpx;
					height: 18rpx;
				}
				.kaiicon{
					display: none;
				}
			}
			.kai{
				.wei{
					font-weight: 500;
					font-size: 24rpx;
					color: #FF5F40;
				}
				.kaiicon{
					margin-right: 10rpx;
					width: 10rpx;
					height: 10rpx;
					background: #44BC6B;
					border-radius: 50%;
					display: inline-block;
				}
			}
		}
		.gaoitem:last-child{
			border-bottom: none;
		}
	}
	.xieyi{
		margin: 40rpx 0;
		display: flex;
		flex-direction: column;
		.xieiem{
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			display: block;
			margin-bottom: 8rpx;
			.xys{
				color: rgba(34, 160, 232, 1);
				display: inline-block;
				margin: 0 5rpx;
			}
		}
	}
	.henxu{
		display: flex;
		flex-direction: row;
		align-items: center;
		.hengleft{
			width: 100rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_jh{
				width: 36rpx;
				height: 36rpx;

			}
		}
		.hengnav{
			display: flex;
			flex: 1;
			margin: 0 20rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 0 20rpx;
			align-items: center;
			position: relative;
			/deep/.uni-input-input{
				color: #111;
				font-size: 36rpx !important;
				font-weight: 500;
			}
			/deep/.u-input__input{
				color: #111;
				font-size: 36rpx !important;
				font-weight: 500;
			}
			
			.danwei{
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
				// position: absolute;
				right: 12rpx;

			}
		}
		
	}
	.jishi{
		display: flex;
		margin-left: auto;
		.jishiitems{
			padding: 10rpx 35rpx;
			border-radius: 10rpx;
			border: 1rpx solid #eee;
			color: #333;
			font-size: 30rpx;
			font-weight: normal;
			margin-left: 30rpx;
		}
		.jiactive{
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			color: #fff;
			border: none;
		}
		.jiitem{
			margin-left: 40rpx;
			position: relative;
			padding-bottom: 10rpx;
			min-width: 80rpx;
			text-align: center;
			.jsname{
				font-weight: 500;
				font-size: 35rpx;
				color: #999999;
			}
			.hengbot{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 6rpx;
				background: #FF5F40;
				display:none;
				left: 0;
				
			}
		}
		.jactive{
			.jsname{
				color: #111111;

			}
			.hengbot{
				display: inline-block;
				
			}
		}
	}
	
	.badge-button {
		padding: 4rpx 6rpx;
		background-color: #ff6d00;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
		position: relative;
		z-index: 4;
	}
	.icon_an{
		width: 48rpx;
		height: 62rpx;
	}
	.botbtn{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 120rpx;
		padding: 10rpx 30rpx auto;
		background-color: #fff;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.btnview{
			width: 94%;
			height: 90rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.huakuai{
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: auto;
		.huaview{
			display: flex;
			flex-direction: column;
			width: 100%;
			.yanse{
				width: 100%;
				display: flex;
				flex-direction: row;
				height: 20rpx;
				position: relative;
				z-index: 2;
			}
			.huaone{
				width: 30%;
				height: 100%;
				background: linear-gradient(90deg, #FF9292, #F41C1C);
			}
			.huatwo{
				width: 25%;
				height: 100%;
				background: linear-gradient(90deg, #FEE161, #F4CF1C);
			}
			.huathree{
				width: 45%;
				height: 100%;
				background: linear-gradient(90deg, #60F49E, #40E284);
			}
		}
		.yanzi{
			display: flex;
			margin-top: 20rpx;
			flex-direction: row;
			.jone{
				position: relative;
				left: -15rpx;
			}
			.jtwo{
				margin-left: 20%;
			}
			.jthree{
				margin-left: 20%;
			}
			.jfour{
				margin-left: auto;
				position: relative;
				right: -15rpx;
			}
			.jia{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.newhua{
			position: absolute;
			width: 100%;
			top: 8rpx;
		}
		/deep/.u-slider{
			z-index: auto;
		}
		
	}
	.qhua{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		display: block;
		text-align: center;
		margin-bottom: 20rpx;

	}
	.qjia{
		font-weight: 800;
		font-size: 28rpx;
		color: #111111;
		display: block;
		text-align: center;
		margin-bottom: 20rpx;

	}
	/deep/.huakuai{
		z-index: auto;
	}
	/deep/.u-slider__gap{
		background-color: transparent !important;
		z-index: 10;
	}
</style>
